<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

<script src="src/layuiadmin/js/jquery-1.8.2.js"></script>
</head>
<body>


	<div class="demoTable">
		搜索ID：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>


	<table id="demo" lay-filter="test"></table>
	<script>
		layui.use([ 'table', 'layer', 'form' ], function() {
			var layer = layui.layer;
			var table = layui.table;
			var form = layui.form;

			//第一个实例
			table.render({
				elem : '#demo',
				height : 600,
				url : 'chaxun', //数据接口

				page : true, //开启分页
				toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',

					sort : true,
					fixed : 'left'
				}, {
					field : 'categoryid',
					title : '分类'

				}, {
					field : 'title',
					title : '名称',

					sort : true
				},{
					field : 'tupian',
					title : '图片',
				    templet : '#imgTpl'

				},{
					field : 'jieshao',
					title : '介绍',
				   

				},{
					fixed : 'right',
					align : 'center',
					toolbar : '#barDemo'
				} //这里的toolbar值是模板元素的选择器
				] ]
			});

			

			//监听工具条
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象
				console.log(data);
				if (layEvent === 'detail') { //查看
					//do somehing
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						//写对应ajax
						$.ajax({
							url : "del",//地址
							type : "get",//请求方式
							data : {id:data.id
							},
							success : function(res) {//成功以后的回调函数
								if (res == 1) {
									alert("删除成功！");
								window.location.reload();
								} else {
									alert("删除失败！");
								}
							}
						});
					});
				} else if (layEvent === 'edit') { //编辑
					//do something
					layer.open({
						type : 1, //Page层类型
						area : [ '500px', '500px' ],
						title : [ '编辑产品信息', 'font-size:18px' ],
						shadeClose : true,
						shade : 0, //遮罩透明度
						maxmin : true, //允许全屏最小化
						content : $("#updateForm"), //弹窗路径
						success : function(layero,index) {
							$('#id').val(data.id);
						$('#categoryid').val(data.categoryid);
							$('#title').val(data.title);
							$('#tupian').val(data.tupian);
							$('#jieshao').val(data.jieshao)
							
						},

					});

					layui.use('upload', function() {
						var upload = layui.upload;

						//执行实例
						var uploadInst = upload.render({
							elem : '#img' //绑定元素
							,
							url : 'upload' //上传接口
							,
							done : function(res) {
								//上传完毕回调
								$("img").attr("src", res.data);
							},
							error : function() {
								//请求异常回调
								alert("上传失败");
							}
						});
					});

					layui.use([ 'laydate', 'form' ], function() {
						var laydate = layui.laydate;
						var form = layui.form;
						//执行一个laydate实例
						laydate.render({
							elem : '#createdate' //指定元素
						});
						$.ajax({
						    url:'fenleichaxunServlet',
						    dataType:'json',
						    type:'get',
						    success:function(res){
						    	
						    	$.each(res.data,function(index,value){
						    		$('#selectID').append("<option value="+value.id+">"+value.name+"</option>");//往下拉菜单里添加元素
						    	})

								form.render();//菜单渲染 把内容加载进去
							}
						})
						form.on('submit(btn)', function(data) {
							console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
							console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
							console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

							data.field.imgurl = $("img").attr("src");

							//写对应ajax
							$.ajax({
								url : "update",//地址
								type : "get",//请求方式
								data : data.field,
								success : function(res) {//成功以后的回调函数
									if (res == 1) {
										alert("修改成功！");
										window.location.reload();
									} else {
										alert("修改失败！");
									}
								}
							});

							return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
						});

					});
				}
			});

		});
	</script>

	<script type="text/html" id="imgTpl">
  		<img src="{{d.tupian}}" />
	</script>
	<!-- 行内工具栏 -->
	<script type="text/html" id="barDemo">
  	
 	    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

	
	<!-- 编辑表单 -->
	<div id="updateForm" style="display: none">
		<form class="layui-form" lay-filter="updateform">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">产品编号</label>
				<div class="layui-input-block">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input" id="id" disabled="disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">产品名</label>
				<div class="layui-input-block">
					<input type="text" name="title" placeholder="请输入"
						autocomplete="off" class="layui-input" id="title">
				</div>
			</div>
			<div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
            

            <select name="categoryid" lay-filter="fenlei"id="selectID">
           
            </select>
            </div>
            </div>
			<div class="layui-form-item layui-form-text">
          <label class="layui-form-label">简介</label>
          <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea" name="jieshao"></textarea>
            </div>
            </div>
			<div class="layui-form-item layui-form-text">
            <label class="layui-form-label">产品图片</label>
            <div class="layui-input-block">
            <button type="button" class="layui-btn" id="img">
            <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <img src="" style = "width:200px;height:200px"/>
            </div>
            </div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="btn">立即提交</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
	</div>


	


</body>

</html>